<template>
    <div></div>
</template>

<script lang="js">
import { defineComponent, watch, provide, renderSlot } from 'vue';
import useParentComponentEffect from '../BigeMap/useParentComponentEffect';
import { callWhenDifferentValue, conditionalCall, warn, isDef, bindEvents } from '../BigeMap/utils';

export default defineComponent({
    props: {
        path: { type: Array, required: true },
        isBoundary: { type: Boolean, required: false },
        strokeColor: { type: String, required: false, default: '#000' },
        autoCenter: { type: Boolean, required: false, default: true },
        strokeWeight: { type: Number, required: false, default: 2 },
        strokeOpacity: { type: Number, required: false, default: 1 },
        strokeStyle: { type: null, required: false, default: 'solid' },
        fillColor: { type: String, required: false, default: '#fff' },
        fillOpacity: { type: Number, required: false, default: 0.3 },
        enableMassClear: { type: Boolean, required: false },
        enableEditing: { type: Boolean, required: false },
        enableClicking: { type: Boolean, required: false },
        geodesic: { type: Boolean, required: false, default: false },
        clip: { type: Boolean, required: false, default: true },
        visible: { type: Boolean, required: false, default: true },
        onClick: { type: null, required: false },
        onDblclick: { type: null, required: false },
        onMousedown: { type: null, required: false },
        onMouseup: { type: null, required: false },
        onMouseout: { type: null, required: false },
        onMouseover: { type: null, required: false },
        onRemove: { type: null, required: false },
        onLineupdate: { type: null, required: false }
    },
    emits: [
    'initd',
        'unload',
        'click',
        'dblclick',
        'mousedown',
        'mouseup',
        'mouseout',
        'mouseover',
        'remove',
        'lineupdate'
    ],

    setup(__props, {attrs, emit:vueEmits}) {
        const props = __props;
        let polygon;
        const { ready } = useParentComponentEffect((map) => {
            const clear = () => {
                polygon && map.removeOverlay(polygon);
            };
            const init = () => {
                if (!props.path || !props.path.length)
                    return process.env.NODE_ENV !== 'production' && warn('BPolygon', 'path is required and not empty array');
                    const { path, strokeColor, strokeWeight, strokeOpacity, strokeStyle, fillOpacity, fillColor, enableMassClear, enableEditing, enableClicking, geodesic, clip, isBoundary, visible } = props;

                polygon = new window.BM_BMapGL.Polygon(window.BM_BMapGL.convertLnglatIn(path), {
                    fill: true,
                    // color: strokeColor,
                    // weight: strokeWeight,
                    // opacity: strokeOpacity,
                    strokeColor,
                    strokeWeight,
                    strokeOpacity,
                    fillColor: fillColor,
                    fillOpacity: fillOpacity,
                });

                visible && map.addOverlay(polygon, map.drawGroup);
                enableEditing ? polygon.enableEditing() : polygon.disableEditing();

                bindEvents(props, vueEmits, polygon);
                ready(map, polygon);
                watch(() => props.strokeColor, setStrokeColor);
                watch(() => props.strokeOpacity, setStrokeOpacity);
                watch(() => props.strokeWeight, setStrokeWeight);
                watch(() => props.strokeStyle, setStrokeStyle);
                watch(() => props.enableMassClear, setMassClear);
                watch(() => props.enableEditing, setEditing);
                watch(() => props.fillColor, setFillColor);
                watch(() => props.fillOpacity, setFillOpacity);
            };
            init();
            // 监听值变化
            watch(() => props.path, callWhenDifferentValue((n) => {
                if (polygon) {
                    n.length ? setPath(window.BM_BMapGL.convertLnglatIn(n)) : clear();
                }
                else {
                    init();
                }
            }), {
                deep: true
            });
            watch(() => props.visible, (n) => {
                map[n ? 'addOverlay' : 'removeOverlay'](polygon);
            });
            return clear;
        });
        provide('getOverlayInstance', () => polygon);
        function setPath(path) {
            polygon && polygon.setPath(path);
        }
        function setStrokeColor(color) {
            polygon && polygon.setStyle({color,});
        }
        function setStrokeOpacity(opacity) {
            polygon && polygon.setStyle({opacity,});
        }
        function setStrokeWeight(weight) {
            polygon && polygon.setStyle({weight,});
        }
        function setStrokeStyle(style) {
            // polygon && polygon.setStrokeStyle(style);
        }
        function setMassClear(enableMassClear) {
            // if (polygon) {
            //     enableMassClear ? polygon.enableMassClear() : polygon.disableMassClear();
            // }
        }
        function setEditing(enableEditing) {
            if (polygon) {
                enableEditing ? polygon.enableEditing() : polygon.disableEditing();
            }
        }
        function setFillColor(color) {
            polygon && polygon.setStyle({fillColor: color,});
        }
        function setFillOpacity(opacity) {
            polygon && polygon.setStyle({fillOpacity: opacity,});
        }
        return (_ctx, _cache) => {
            return renderSlot(_ctx.$slots, "default");
        };
    }
})
</script>